<script setup>
import { useRoute, useRouter } from 'vue-router'

const props = defineProps({
  path: {
    type: String,
    default: '',
  },
  svgIcon: {
    type: String,
    default: '',
  },
})

const router = useRouter()
const route = useRoute()

const goPage = () => {
  if(!props.path) {
    throw new Error('path is required')
  }
  router.push(props.path)
}

const isActive = computed(() => {
  return route.path === props.path
})
</script>

<template>
  <button v-ripple class="btn" :class="[isActive && 'active']" @click="goPage">
    <div class="btn__wrap">
      <slot name="prepend" :is-active="isActive">
        <i v-if="svgIcon" class="mr-12px" :class="isActive ? `i-svg-${svgIcon}-active` : `i-svg-${svgIcon}`" />
      </slot>
      <slot />
    </div>
  </button>
</template>

<style lang='scss' scoped>
.btn {
  @apply text-white bg-cover bg-center bg-no-repeat bg-transparent border-none outline-none cursor-pointer font-size-24px;

  width: 190px;
  height: 32px;
  font-family: $font-sub;
  background-image: url('/src/assets/image/navbar/btn-inactive.png');

  @keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
      transform: translateY(-45%);
    }

    40% {
      transform: translateY(-75%);
    }

    60% {
      transform: translateY(-55%);
    }
  }

  &__wrap {
    @apply flex items-center justify-center;

    height: 100%;
    transform: translateY(-45%);
    will-change: transform;
  }

  &.active {
    background-image: url('/src/assets/image/navbar/btn-active.png');

    /* stylelint-disable-next-line declaration-property-value-no-unknown */
    -webkit-text-stroke: 0.5px $color-yellow;
    /* stylelint-disable-next-line declaration-property-value-no-unknown */
    text-stroke: 0.5px $color-yellow;

    .btn__wrap {
      animation: bounce 600ms ease;
      animation-fill-mode: forwards;
    }
  }
}
</style>
